<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
    <!--ztree-->
    <link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <title>用户信息表单</title>
    <style>
        .role-card{
            border: #DDDDDD solid 1px;
            border-radius: 2px;
            padding: 8px 12px;
            line-height: 1.7;
            box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
            color: #666666;
            position: relative;
        }
        .role-card-name{
            font-size: 16px;
            font-weight: 400;
            color: #111111;
        }
        .remove-role{
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 20px;
            text-align: center;
            position: absolute;
            bottom: 8px;
            right: 12px;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row" id="tabDiv" style="display: none;">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <ul class="nav nav-tabs" role="tablist" id="tab-option">
                <li class="active" role="presentation">
                    <a data-toggle="tab" href="#baseInfo" aria-controls="exampleTabsInverseOne" role="tab" aria-expanded="true">
                        用户信息
                    </a>
                </li>
                <li role="presentation" class="">
                    <a data-toggle="tab" href="#roleInfo" aria-controls="exampleTabsInverseTwo" role="tab" aria-expanded="false">
                        角色信息
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="tab-content">
        <!--基本信息-->
        <div class="tab-pane active" id="baseInfo" role="tabpanel">
            <div class="row">
                <div class="col-xs-12">
                    <!--按钮栏-->
                    <div class="form-group button-bar button-bar">
                        <button type="button" isShow="joForm.isAdd" class="btn btn-primary" onclick="joForm.save()">
                            <i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;新增
                        </button>
                        <button type="button" isShow="!joForm.isAdd" class="btn btn-info" onclick="joForm.update()">
                            <i class="fa fa-pencil-square" aria-hidden="true"></i>&nbsp;修改
                        </button>
                        <button type="button" isShow="!joForm.isAdd" class="btn btn-danger" onclick="joForm.del()">
                            <i class="fa fa-trash" aria-hidden="true"></i>&nbsp;删除
                        </button>
                    </div>
                    <!--按钮栏-->
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <form id="pageForm" name="pageForm" action="" method="post">
                        <div class="young-form-item col-md-6 must">
                            <div class="young-form-label">姓名</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="name" value="" class="form-control " ErrEmpty="姓名不允许为空" autocomplete="off"  />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 must">
                            <div class="young-form-label">账号</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="account" value="" class="form-control "  ErrEmpty="账号不允许为空" autocomplete="off" />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6">
                            <div class="young-form-label">出生日期</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text" id="birthday" value="" name="birthday" class="form-control "  autocomplete="off"  />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6">
                            <div class="young-form-label">性别</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <select  name="sex" class="form-control">
                                    <option value=""></option>
                                    <option value="1">男</option>
                                    <option value="0">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="young-form-item col-md-6">
                            <div class="young-form-label">联系电话</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="tel" value="" class="form-control "   autocomplete="off" />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6">
                            <div class="young-form-label">常用邮箱</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="email" value="" class="form-control "  ErrMail="邮箱格式有误"  autocomplete="off"/>
                            </div>
                        </div>
                        <div class="young-form-item col-md-6">
                            <div class="young-form-label">账号状态</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <select  name="state" class="form-control">
                                    <option value="1">可用</option>
                                    <option value="0">禁用</option>
                                </select>
                            </div>
                        </div>
                        <div class="young-form-item col-md-6">
                            <div class="young-form-label">所属单位</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <div class="input-group">
                                    <input type="hidden" id="companyId" name="companyId" class="form-control">
                                    <input type="text" id="companyName" name="companyName" class="form-control" autocomplete="off">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" onclick="choiceCompany('companyId', 'companyName', false)">
                                    <i class="fa fa-bars" aria-hidden="true"></i>&nbsp;选择
                                </button>
                            </span>
                                </div>
                            </div>
                        </div>
                        <div class="young-form-item col-md-6" id="setRoleDiv" style="display:none;">
                            <div class="young-form-label">分配角色</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <div class="input-group">
                                    <input type="hidden" id="roleIds" name="roleIds" class="form-control">
                                    <input type="text" id="roleNames" name="roleNames" class="form-control" autocomplete="off">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" onclick="choiceRoleContainsCommonRole('roleIds', 'roleNames', true)">
                                    <i class="fa fa-bars" aria-hidden="true"></i>&nbsp;选择
                                </button>
                            </span>
                                </div>
                            </div>
                        </div>
                        <div class="young-form-item col-md-6">
                            <div class="young-form-label">备注信息</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <textarea  name="remark" value="" class="form-control "   autocomplete="off" ></textarea>
                            </div>
                        </div>
                        <div class="young-form-item col-md-6">
                            <div class="young-form-label">用户类别</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="category" value="" class="form-control "  autocomplete="off"  />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6">
                            <div class="young-form-label">显示顺序</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="num" value="100" class="form-control "  ErrNumber="显示顺序需填写数字类型" autocomplete="off" />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6">
                            <div class="young-form-label">上次登录</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text" id="lastLoginTime" value="" name="lastLoginTime" class="form-control " readonly  autocomplete="off" />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6">
                            <div class="young-form-label">最近登录</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text" id="thisLoginTime" value="" name="thisLoginTime" class="form-control " readonly  autocomplete="off" />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6">
                            <div class="young-form-label">创建时间</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text" id="createTime" value="" name="createTime" class="form-control " readonly  autocomplete="off" />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6">
                            <div class="young-form-label">修改时间</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text" id="updateTime" value="" name="updateTime" class="form-control " readonly  autocomplete="off" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="tab-pane" id="roleInfo" role="tabpanel">
            <div class="row">
                <div class="col-xs-12">
                    <div id="roleShow">
                        <!--<div class="col-sm-6 col-lg-4">
                            <div class="role-card">
                                <div>
                                    <div class="pull-left role-card-name">超级管理员角色</div>
                                    <div class="pull-right"><span class="label label-primary">管理角色</span></div>
                                    <div class="clear"></div>
                                </div>
                                <div><i class="fa fa-building" aria-hidden="true"></i>&nbsp;红色太行科技有限公司</div>
                                <div><i class="fa fa-wrench" aria-hidden="true"></i>&nbsp;山西省</div>
                            </div>
                        </div>-->
                    </div>
                    <div class="col-sm-6 col-lg-4">
                        <input type="hidden" id="giveRoleIds"  class="form-control "/>
                        <button type="button" isShow="joForm.isAdd" class="btn btn-primary" onclick="giveRole2User()">
                            <i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;分配角色
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>


</div>

<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script type="text/javascript">
    layui.laydate.render({
        elem: '#birthday' //注册日期控件
    });
    /*layui.laydate.render({
        elem: '#lastLoginTime' //注册日期控件
    });
    layui.laydate.render({
        elem: '#thisLoginTime' //注册日期控件
    });
    layui.laydate.render({
        elem: '#createTime' //注册日期控件
    });
    layui.laydate.render({
        elem: '#updateTime' //注册日期控件
    });*/
    $(function(){
        var jParams = {
            "PKName" : "id",//主键属性名
            "saveAfter" : "toEdit",
            "addUrl" : "{URL_UMS}ums/user/insert",//新增
            "deleteUrl" : "{URL_UMS}ums/user/delete",//删除
            "updateUrl" : "{URL_UMS}ums/user/update",//修改
            "formDataUrl" : "{URL_UMS}ums/user/get",//查询
            //"readonly2Label" : true //只读转文本
        };
        joForm.initFormPage(jParams);//初始化
    });
    //初始化新增页面回调函数(在初始化按钮前发生)
    joForm.initFormPageOfAdd = function(){
        $('#setRoleDiv').show();
    };
    //初始化表单值前处理
    joForm.initFormValueBefore = function(oJson){
        oJson.birthday = jo.formatDate(oJson.birthday);
        oJson.lastLoginTime = jo.formatDate(oJson.lastLoginTime);
        oJson.thisLoginTime = jo.formatDate(oJson.thisLoginTime);
        oJson.createTime = jo.formatDate(oJson.createTime);
        oJson.updateTime = jo.formatDate(oJson.updateTime);
        $('#tabDiv').slideDown();
    };
    //初始化表单值后处理
    joForm.initFormValueAfter = function(oJson){
        loadRoleInfo();//加载角色信息
    };
    //新增请求提交前回调函数
    joForm.dealDataAtSaveBefore = function(oJson){

    };
    //修改请求提交前回调函数
    joForm.dealDataAtUpdateBefore = function(oJson){

    };
    /* 关于joForm更多回调函数和配置参数可查看jo-page-form.js */
    //加载角色信息
    function loadRoleInfo(){
        if(!joForm.isAdd && joForm.params.PKValue){
            jo.postAjax('{URL_UMS}ums/role/getRoleListByUserId', {userId:joForm.params.PKValue}, function(json){
                if(json && json.code == 0){
                    var _html = '';
                    var roleIds = [];
                    if(json.data && json.data.length > 0){
                        for(var i=0;i<json.data.length;i++){
                            var item = json.data[i];
                            _html += '<div class="col-sm-6 col-lg-4">'
                                        + '<div class="role-card">'
                                            + '<div>'
                                                + '<div class="pull-left role-card-name">'+item.name+'</div>'
                                                + '<div class="pull-right">'+formatRoleType(item.type)+'</div>'
                                                + '<div class="clear"></div>'
                                            + '</div>'
                                            + '<div><i class="fa fa-building" aria-hidden="true"></i>&nbsp;'+item.companyName+'</div>'
                                            + '<div><i class="fa fa-wrench" aria-hidden="true"></i>&nbsp;'+jo.getDefVal(item.rangeName, '无')+'</div>'
                                            + '<div class="remove-role cursor-hand" onclick="removeRole(\''+item.id+'\')"><i class="fa fa-minus-circle font-red" title="移除" aria-hidden="true"></i></div>'
                                        + '</div>'
                                    + '</div>';
                            roleIds.push(item.id);
                        }
                    }
                    if(!_html){
                        _html = '用户尚未分配角色.';
                    }
                    $('#roleShow').html(_html);
                    $('#giveRoleIds').val(roleIds.join(','))
                }
            }, true);
        }
    }
    //格式化角色类型
    function formatRoleType(type){
        if(type == '1'){
            return '<span class="label label-primary">管理角色</span>';
        }else if(type == '2'){
            return '<span class="label label-warning">普通角色</span>';
        }else{
            return type;
        }
    }

    function giveRole2User() {
        choiceRoleContainsCommonRole('giveRoleIds', '', true, 'giveRole2User', function(yesOrNo, ids, names){
            if (yesOrNo && ids && names) {
                jo.confirm('您确定追加分配这些角色给该用户吗(已有的角色不增不减)?', function (idx) {
                    jo.postAjax('{URL_UMS}ums/roleUser/relevanceRoles2User', {roleIds: ids, userId: joForm.params.PKValue}, function (json) {
                        if (json && json.code == 0) {
                            jo.showSuccessMsg('分配成功~');
                            // 加载角色
                            loadRoleInfo();
                            // 关闭弹层
                            jo.close(this.winIdx);
                        } else {
                            jo.showErrorMsg(jo.getDefVal(json.info, '分配失败'));
                        }
                    });
                    jo.close(idx);
                });

            }
        });
    }

    // 移除角色
    function removeRole(roleId) {
        jo.confirm('您确定移除该角色吗?', function (idx) {
            jo.postAjax('{URL_UMS}ums/roleUser/removeRoleUser', {roleId: roleId, userId: joForm.params.PKValue}, function (json) {
                if (json && json.code == 0) {
                    jo.showSuccessMsg('移除成功~');
                    // 加载角色
                    loadRoleInfo();
                } else {
                    jo.showErrorMsg(jo.getDefVal(json.info, '移除失败'));
                }
            });
            jo.close(idx);
        });
    }

</script>
</body>
</html>
